<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米商城 ｜ 首页</title>
  <!-- <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3738029_40u9dejgxwx.css"> -->
  <link rel="stylesheet" href="./font/iconfont.css">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3743778_jug0ou250of.css">
</head>

<body>
  <!-- html:5   语义化标签   div 
    pull   push  
    字体图标库（
      创建 ：
       进入iconfont网站： https://www.iconfont.cn/
       创建账号 

      引用
    ）
   -->

  <!-- header开始 -->
  <header id="header">
    <div class="container">
      <ul class="flex">
        <li><a href="">小米官网</a></li>
        <li><a href="">小米商城</a></li>
        <li><a href="">MIUI</a></li>
        <li><a href="">loT</a></li>
        <li><a href="">天星数科</a></li>
        <li><a href="">有品</a></li>
        <li><a href="">小爱开放平台</a></li>
        <li><a href="">企业团购</a></li>
        <li><a href="">资质证照</a></li>
        <li><a href="">协议规则</a></li>
        <li><a href="">下载app</a></li>
        <li><a href=""> Select Location</a></li>
      </ul>
      <ul class="flex">
        <li>登陆</li>
        <li>注册</li>
        <li class="no-gap">消息通知</li>
        <li class="cart"><i class="iconfont icon-cart"></i><a href="">购物车 (0)</a></li>
      </ul>
    </div>
  </header> <!-- header 结束 -->


  <!-- nav 开始 -->
  <nav id="nav" class="container flex align-items-center">
    <!-- logo -->
    <a href="index.html"><img class="logo" src="./images/logo-mi2.png" alt=""></a>

    <!-- 导航 -->
    <ul class="flex">
      <li><a href="">Xiaomi手机</a></li>
      <li><a href="">Redmi手机</a></li>
      <li><a href="">电视</a></li>
      <li><a href="">笔记本</a></li>
      <li><a href="">平板</a></li>
      <li><a href="">家电</a></li>
      <li><a href="">路由器</a></li>
      <li><a href="">服务中心</a></li>
      <li><a href="">社区</a></li>
    </ul>

    <!-- 搜索框 -->
    <div class="search flex">
      <input type="text" name="" id="">
      <button><i class="iconfont icon-search"></i></button>
    </div>

  </nav> <!-- nav 结束 -->

  <div id="banner" class="container">
    <div class="wrapper">
      <div class="link">手机<i class=" jiantou iconfont icon-youjiantou"></i></div>
      <div class="link">电脑<i class=" jiantou iconfont icon-youjiantou"></i></div>
      <div class="link">笔记本 平板<i class=" jiantou iconfont icon-youjiantou"></i></div>
      <div class="link">出行 穿戴<i class=" jiantou iconfont icon-youjiantou"></i></div>
      <div class="link">耳机 音响<i class=" jiantou iconfont icon-youjiantou"></i></div>
      <div class="link">家电<i class=" jiantou iconfont icon-youjiantou"></i></div>
      <div class="link">智能 路由器<i class=" jiantou iconfont icon-youjiantou"></i></div>
      <div class="link">电源 配件<i class=" jiantou iconfont icon-youjiantou"></i></div>
      <div class="link">健康 儿童<i class=" jiantou iconfont icon-youjiantou"></i></div>
      <div class="link">生活 箱包<i class=" jiantou iconfont icon-youjiantou"></i></div>
    </ul>
    <!-- <img class="tu" src="./images/tu.jpg" width="1260" height="460"> -->
  </div>
</body>

</html>